<template>
  <el-dialog :title="$t('xuanzetongbushuju')" :visible.sync="visible" width="600px">
    <el-form ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <div class="lookStrClass">
        {{ lookStr }}
      </div>
      <el-form-item v-for="item in formData" :key="item.id" :label="`${item.account}`">
        <el-radio-group v-model="item.code">
          <el-radio v-for="op in codeType" :key="op.label" :label="op.label">{{ op.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px">
        <el-button type="primary" @click="submitForm()" :loading="loading">{{ $t('confirm') }}</el-button>
        <el-button @click="cancel">{{ $t('cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { accountConfirmApi } from '@/api/user';
export default {
  components: {},
  props: {},
  data() {
    return {
      visible: false,
      formData: [],
      loading: false,
      lookStr: '',
    };
  },
  watch: {},
  computed: {
    codeType() {
      return [
        {
          label: 'NEW',
          name: '新建',
        },
        {
          label: 'ACCORD',
          name: '一致',
        },
      ];
    },
  },
  created() {},
  mounted() {},
  methods: {
    show(data, accountType) {
      const { failList, handlerList, successList } = data;
      this.lookStr = this.$t('syncError').replace('&@', failList.length).replace('@&', successList.length);
      this.visible = true;
      console.log(data);
      const arr = [];
      handlerList.forEach((item) => {
        arr.push({
          id: item.uid || item.id,
          account: item.account,
          code: 'ACCORD',
          accountType,
        });
      });
      this.formData = arr;
    },
    submitForm() {
      this.loading = true;
      accountConfirmApi({ confirmRequestList: this.formData })
        .then((res) => {
          this.cancel();
          this.$message.success(this.$t('syncSuccess'));
          this.$emit('getList');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    cancel() {
      this.visible = false;
      this.formData = [];
      this.lookStr = '';
    },
  },
  destroyed() {},
};
</script>

<style scoped>
.lookStrClass {
  font-size: 18px;
  font-weight: 500;
  color: red;
  margin-left: 150px;
  margin-bottom: 20px;
}
</style>
